<template>
  <div class="h-full flex flex-col p-2">
    <!-- 按键 -->
    <div class="flex justify-between rounded items-center bg-white">
      <el-space>
        <el-button class="m-2" type="primary" @click="() => (show.add = true)"
          >创建数据集</el-button
        >
      </el-space>
      <el-space>
        <el-input
          v-model="searchDataSetName"
          :suffix-icon="Search"
          placeholder="请输入数据集名称"
        />
        <el-button type="primary" @click="getList()">查询</el-button>
        <el-button class="mr-2" @click="resetSearchDataSetName()"
          >重置</el-button
        >
      </el-space>
    </div>
    <!-- 数据集列表 -->
    <div class="flex flex-col rounded pb-2">
      <el-scrollbar
        class="rounded"
        style="width: 100%; height: calc(100vh - 11.5rem)"
      >
        <div class="bg-white mt-2 rounded" v-for="item in tableData">
          <!--  -->
          <div class="h-12 flex-1 flex items-center pr-2">
            <el-space
              class="text-xs rounded-tl text-white h-full w-3 pl-1 pr-1 mr-2"
              style="background-color: #409eff"
              >训练</el-space
            >
            <el-space class="w-full h-full text-sm">{{
              item.trainingName
            }}</el-space>
            <el-space class="w-full h-full flex items-center justify-center"
              ><el-tag effect="dark"> {{ item.category }}</el-tag></el-space
            >
            <el-space class="w-full h-full items-center justify-end">
              <!-- 备注 -->
              <el-tooltip effect="light" :content="item.rem" placement="bottom">
                <el-icon
                  :size="20"
                  color="#409efc"
                  class="w-10 p-2 h-full flex items-center justify-center cursor-pointer"
                >
                  <ChatDotRound />
                </el-icon>
              </el-tooltip>
              <!-- 编辑 -->
              <el-tooltip effect="light" content="编辑" placement="bottom">
                <el-icon
                  :size="20"
                  color="#409efc"
                  class="w-10 p-2 h-full flex items-center justify-center cursor-pointer"
                  @click="DataSetEditing(item)"
                >
                  <ChatDotSquare />
                </el-icon>
              </el-tooltip>
              <!-- 删除 -->
              <el-popconfirm
                width="240"
                title="此操作将永久删除,是否继续?"
                @confirm="DeleteDataSet(item)"
              >
                <template #reference>
                  <el-icon
                    :size="20"
                    color="#409efc"
                    class="w-10 p-2 h-full flex items-center justify-center cursor-pointer"
                  >
                    <FolderDelete />
                  </el-icon>
                </template>
              </el-popconfirm>
            </el-space>
          </div>
          <!--  -->
          <el-divider direction="horizontal" />
          <!--  -->
          <div class="h-12 flex items-center pr-2">
            <el-space
              class="w-full h-full flex items-center justify-center text-sm text-slate-400"
            >
              创建时间</el-space
            >
            <el-space
              class="w-full h-full flex items-center justify-center text-sm text-slate-400"
              >操作</el-space
            >
          </div>
          <!--  -->
          <el-divider direction="horizontal" />
          <!--  -->
          <div class="h-12 flex items-center pr-2">
            <el-space
              class="w-full h-full flex items-center justify-center text-xs text-slate-700"
            >
              {{
                moment(parseInt(item.createTime)).format("YYYY-MM-DD HH:mm:ss")
              }}</el-space
            >
            <el-space
              class="w-full h-full flex items-center justify-center text-sm text-slate-700"
            >
              <el-space
                class="border-b-4 border-slate-600 cursor-pointer"
                style="align-items: center; gap: 0px 0px"
                @click="TrainingFrame(item)"
              >
                <el-icon :size="17" color="#334155"> <DataAnalysis /> </el-icon
                >{{ StatusModification(item.status) }}</el-space
              >

              <el-space
                class="border-b-4 border-slate-600 ml-2 cursor-pointer"
                style="align-items: center; gap: 0px 0px"
                v-show="!StatusAvailable(item.status)"
                @click="DownloadModel(item)"
              >
                <el-icon :size="17" color="#334155"> <Download /> </el-icon
                >下载模型</el-space
              >

              <el-space
                class="border-b-4 border-slate-600 ml-2 cursor-pointer"
                style="align-items: center; gap: 0px 0px"
                @click="TrainingLogMethod(item)"
              >
                <el-icon :size="17" color="#334155"> <Document /> </el-icon
                >训练日志</el-space
              >

              <el-space
                class="border-b-4 border-slate-600 ml-2 cursor-pointer"
                style="align-items: center; gap: 0px 0px"
                @click="SkipManagement(item)"
              >
                <el-icon :size="17" color="#334155"> <Tools /> </el-icon
                >管理</el-space
              >

              <el-popconfirm
                width="240"
                title="此操作将永久删除,是否继续?"
                @confirm="OneClickDelete(item)"
              >
                <template #reference>
                  <el-space
                    class="border-b-4 border-slate-600 ml-2 text-red-500 cursor-pointer"
                    style="align-items: center; gap: 0px 0px"
                  >
                    <el-icon :size="17" color="#d54941"> <Close /> </el-icon
                    >删除</el-space
                  >
                </template>
              </el-popconfirm>
            </el-space>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="h-12 flex rounded items-center justify-end bg-white">
      <el-pagination
        :current-page="pagination.pageNumber"
        :page-size="pagination.articleNumber"
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next"
        :total="pagination.altogether"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
      />
    </div>
    <!-- 弹框 -->
    <el-dialog
      v-model="show.add"
      title="创建数据集 "
      width="30%"
      align-center
      destroy-on-close
    >
      <CreateDataSetDialog ref="addFormRef"></CreateDataSetDialog>
      <template #footer>
        <div class="flex justify-end">
          <el-space>
            <el-button @click="() => (show.add = false)">取消</el-button>
            <el-button type="info" @click="() => addFormRef.reset()"
              >重新填写</el-button
            >
            <el-button type="primary" @click="handleConfirmAdd">确认</el-button>
          </el-space>
        </div>
      </template>
    </el-dialog>
    <!-- 修改弹框 -->
    <el-dialog
      v-model="show.edit"
      title="修改数据集"
      width="30%"
      align-center
      destroy-on-close
    >
      <CreateDataSetDialog
        :="addFormRef"
        ref="addFormRef"
      ></CreateDataSetDialog>
      <template #footer>
        <div class="flex justify-end">
          <el-space>
            <el-button @click="() => (show.edit = false)">取消</el-button>
            <el-button type="primary" @click="handleConfirmEdit()"
              >确认修改</el-button
            >
          </el-space>
        </div>
      </template>
    </el-dialog>
    <!-- 训练默认配置  -->
    <TrainingDefaultConfiguration
      ref="addTrainDialogVue"
      :visible="state.visible"
    />

    <!-- 训练日志  -->
    <TrainingLog ref="addTrainingLogShow" :visible="state.TrainingLogShow" />
  </div>
</template>
<script setup>
//
import { onMounted, reactive, ref } from "vue";
//
import {
  Search,
  ChatDotRound,
  Download,
  ChatDotSquare,
  FolderDelete,
  DataAnalysis,
  Document,
  Tools,
  Close,
} from "@element-plus/icons-vue";
/**
 *
 */
import { ElMessage } from "element-plus";
/**
 * 数据集弹框
 */
import CreateDataSetDialog from "@/components/dialog/CreateDataSetDialog.vue";

/**
 * 获取训练默认配置
 */
import TrainingDefaultConfiguration from "@/components/dialog/TrainingDefaultConfiguration.vue";
/**
 *  训练日志
 */
import TrainingLog from "@/components/dialog/TrainingLog.vue";
/**
 * 添加数据集
 */
import DataSetApi from "@/api/modules/DataSetApi";
/**
 *
 */
import moment from "moment";
/**
 * 存储
 */
import storageService from "@/utils/dataStore_utils";
/**
 * 训练集
 */
import FileUploadApi from "@/api/modules/FileUploadApi";
/**
 *
 */
import { requestedMessage } from "@/utils/requested_utils";
/**
 *
 */
import { StatusModification, StatusAvailable } from "@/utils/common_utils";
/**
 * 数据集数据
 */
const addFormRef = ref();
/**
 * 展示弹框
 */
const show = reactive({
  add: false,
  edit: false,
});

/**
 * 获取训练默认配置
 */
const addTrainDialogVue = ref();

/**
 *
 */
const addTrainingLogShow = ref();
/**
 * 列表
 */
const state = reactive({
  visible: false,
  TrainingLogShow: false,
});

/**
 * 分页
 */
const pagination = reactive({
  pageNumber: 1,
  articleNumber: 10,
  altogether: 0,
});
/**
 * 搜索数据集名称
 */
const searchDataSetName = ref();
/**
 * 回数据
 */
const tableData = ref([]);
/**
 * 生命周期
 */
onMounted(() => {
  /**
   * 获取数据
   */
  getList();
});

/**
 *  获取训练集列表
 */
function getList() {
  requestedMessage(
    async () => {
      const { message, msg, altogether } = await DataSetApi.getTrainingSetList({
        pageIndex: pagination.pageNumber,
        pageSize: pagination.articleNumber,
        trainingName: searchDataSetName.value,
      });
      tableData.value = message.list;
      pagination.altogether = message.total;
      return msg;
    },
    {
      showSuccess: true,
      fullscreenLoading: true,
    }
  );
}

/**
 * 清理搜索数据集
 */
function resetSearchDataSetName() {
  //
  searchDataSetName.value = "";
  /**
   * 获取数据
   */
  getList();
}

/**
 * 删除数据集
 */
function DeleteDataSet(item) {
  requestedMessage(
    async () => {
      const { message, msg, altogether } = await DataSetApi.deleteTrainingSet(
        item.id
      );
      /**
       * 获取数据
       */
      getList();
      return msg;
    },
    {
      showSuccess: true,
      fullscreenLoading: true,
    }
  );
}

/**
 *  分页调用
 */
function onCurrentChange(num) {
  pagination.pageNumber = num;
  getList();
}

/**
 *  分页调用
 */
function onSizeChange(num) {
  pagination.pageNumber = 1;
  pagination.articleNumber = num;
  getList();
}

/**
 * 确认
 */
async function handleConfirmAdd() {
  try {
    await addFormRef.value.validate();
    requestedMessage(async () => {
      const { msg } = await DataSetApi.createTrainingSet({
        trainingName: addFormRef.value.employee.trainingName,
        category: addFormRef.value.employee.category,
        rem: addFormRef.value.employee.rem,
      });
      show.add = false;
      /**
       * 刷新页面
       */
      getList();
      return msg;
    });
  } catch (error) {
    console.log("错误", error);
  }
}

/**
 * 数据集编辑
 */
function DataSetEditing(item) {
  //复制
  addFormRef.value = item;
  console.log("打印", addFormRef.value);
  //
  show.edit = true;
}

/**
 * 训练弹框
 */
function TrainingFrame(item) {
  if (item.status === 1) {
    ElMessage({
      grouping: true,
      message: "训练中无法点击...",
      type: "error",
    });
    return;
  }
  storageService.saveToSessionStorage("TheDataSetid", item.id);
  addTrainDialogVue.value.open();
}

/**
 * 下载模型
 */
function DownloadModel(item) {}

/**
 * 修改
 */
async function handleConfirmEdit() {
  try {
    console.log("数据", addFormRef);

    await addFormRef.value.validate();
    requestedMessage(async () => {
      const { msg } = await DataSetApi.editTrainingSet({
        id: addFormRef.value.employee.id,
        trainingName: addFormRef.value.employee.trainingName,
        rem: addFormRef.value.employee.rem,
      });
      return msg;
    });
  } catch (error) {
    console.log("错误", error);
  }
}

/**
 * 训练日志
 */
function TrainingLogMethod(item) {
  console.log("----------", item);
  storageService.saveToSessionStorage("trainingName", item.trainingName);
  addTrainingLogShow.value.open();
}

/**
 * 跳转管理
 */
function SkipManagement(item) {
  console.log("跳转管理");
  storageService.saveToSessionStorage("TheDataSetid", item.id);
  //
  window.$router.push("/data_catalogue");
}

/**
 * 一键删除
 */
function OneClickDelete(item) {
  requestedMessage(
    async () => {
      const { message, msg } = await FileUploadApi.deleteAllResource(item.id);
      /**
       * 获取训练集列表
       */
      getList();
      /**
       *
       */
      return msg;
    },
    {
      showSuccess: true,
      fullscreenLoading: true,
    }
  );
}
</script>

<!--  -->
<style>
.el-card {
  --el-card-padding: 0px;
}
.el-card__body {
  width: 100%;
  padding: var(--el-card-padding);
}

.el-divider {
  position: 0;
}

.el-divider--horizontal {
  border-top: 1px var(--el-border-color) var(--el-border-style);
  display: block;
  height: 1px;
  margin: 0px auto;
  width: 100%;
}

.el-dropdown-link-1 {
  color: var(--header-text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
